<style>
#date_div{
	width:320px;
	height:400px;
	border:1px solid #eceff4;
	font-size:0.7em;
	}

.date_title{
	background-color:#f6f9ff;
	height:50px;
	padding:5px;
	font-size:16px;
	padding-left:50px;
	}
.date_title select{
	width:150px;
	}
#left_ul{
	float:left;
	padding-top:10px;
	padding-left:50px;
	height:200px;
	border-right:1px solid #eceff4;
	
}

#left_ul li{
	width:100px;
	height:35px;
	line-height:35px;
	}	
.right_ul li{
	width:100px;
	float:left;
	}
.right_ul{
	width:150px;
	padding-top:10px;
	padding-left:10px;
	}	
.right_ul li{
	width:70px;
	height:35px;
	line-height:35px;
	}
#botton_div{
	clear:both;
	background-color:#f6f9ff;
	overflow:hidden;
   
	width:300px;
	margin:0 auto;
	padding:5px;
	}
#botton_div input{
	width:100px;
	float:left;
	margin-left:20px;
	height:30px;
	line-height:30px;
	}
#btn_div{
	height:50px;
	background-color:#f6f9ff;
	margin-top:15px;
	}
#btn_div button{
	float:right;
	margin-right:10px;
	margin-top:10px;
	}
#left_ul li:hover{
	cursor:pointer;
	}
#text_span:hover{
	cursor:pointer;
	}							
</style>

<div class="main-content">
	<div class="breadcrumbs" id="breadcrumbs">
		<!-- .breadcrumb -->
	</div>
	<div class="page-content">
        
        <div class="page-header">
        
        	<form action="<?php echo site_url();?>crm/tongji/money_gas" method="get" id="form_id">
			<div style=" padding:5px;">
            
            
            <span style="padding:0px 10px;border-right:1px solid  #999;">时间: 
            <span id="text_span" onclick="$('#date_div').toggle()">
            <?php
            		if(!empty($search_start_time)&&!empty($search_end_time)){
							echo $search_start_time.'-'.$search_end_time;
						}elseif($type=='yesterday'){
							echo '昨天';
						}elseif($type=='today'){
							echo '今天';
						}elseif($type=='lastweek'){
							echo '上个周';	
						}elseif($type=='thisweek'){
							echo '本周';
						}elseif($type=='lastmonth'){
							echo '上个月';
						}elseif($type=='thismonth'){
							echo '本月';
						}elseif($type=='first_h_year'){
							echo '上半年';
						}elseif($type=='second_h_year'){
							echo '下半年';
						}elseif($type=='this_season'){
							echo '本季度';
						}elseif($type=='month'&&!empty($type_year_value)&&!empty($type_value)){
							echo $type_year_value.'-'.$type_value;
						}elseif($type=='season'&&!empty($type_year_value)&&!empty($type_value)){
							echo $type_year_value.'第'.$type_value.'季度';	
						}elseif($type=='year'&&!empty($type_year_value)&&!empty($type_value)){
							
							echo $type_year_value.($type_value==1?'上半年':'下半年');	
						}
			?>
            
            
            <img src="<?php echo site_url()?>/themes/default/images/sanjiao.jpg" width="10" height="10" /></span></span>
            <span style="padding:0px 10px; font-size:0.8em;">
            <select name="gas_id" onchange="form_submit()">
            	
                <option value="0" <?php if(isset($_GET['gas_id'])&&$_GET['gas_id']==0):?> selected="selected"<?php endif;?>>请选择</option>
            	<?php foreach($gas as $k=>$v):?>
            	<option <?php if(!empty($_GET['gas_id'])&&$_GET['gas_id']==$v['id']):?> selected="selected"<?php endif;?> value="<?php echo $v['id']?>"><?php echo $v['gasstation_name']?></option>
                <?php endforeach;?>
            </select>
            <a style="color:#589dfa;" href="<?php echo site_url();?>crm/tongji/money_gas">重置筛选</a></span>
            
            
            <div id="date_div" style=" position:absolute; display:none; background-color:#FFF; top:7%; z-index:99; left:20%;">
            	<div class="date_title"><span>年份：</span><select id="year" name="year"><option value="2018" <?php if(!empty($type_year_value)&&$type_year_value=='2018'):?> selected="selected"<?php endif;?>>2018</option><option value="2017" <?php if(!empty($type_year_value)&&$type_year_value=='2017'):?> selected="selected"<?php endif;?>>2017</option></select></div>
            	<div style="float:left;">
                	<ul id="left_ul">
                    	<li onclick="show_div('default')">常用</li>
                        <li onclick="show_div('month')">月份</li>
                        <li onclick="show_div('season')">季度</li>
                        <li onclick="show_div('half_year')">半年</li>
                        
                    </ul>
                
                
                </div>
            	
                <div style="float:left">
                	<ul class="right_ul default">
                    	<li><a href="javascript:search_data('yesterday')">昨日</a></li>
                        <li><a href="javascript:search_data('today')">今日</a></li>
                        <li><a href="javascript:search_data('lastweek')">上周</a></li>
                        <li><a href="javascript:search_data('thisweek')">本周</a></li>
                        <li><a href="javascript:search_data('lastmonth')">上月</a></li>
                        <li><a href="javascript:search_data('thismonth')">本月</a></li>
                        <li><a href="javascript:search_data('first_h_year')">上半年</a></li>
                        <li><a href="javascript:search_data('second_h_year')">下半年</a></li>
                        <li><a href="javascript:search_data('this_season')">本季度</a></li>
                       
                    </ul>
                    
                    <ul class="right_ul month" style="display:none;">
                    	<li><a href="javascript:search_data('month',1)">1月</a></li>
                        <li><a href="javascript:search_data('month',2)">2月</a></li>
                        <li><a href="javascript:search_data('month',3)">3月</a></li>
                        <li><a href="javascript:search_data('month',4)">4月</a></li>
                        <li><a href="javascript:search_data('month',5)">5月</a></li>
                        <li><a href="javascript:search_data('month',6)">6月</a></li>
                        <li><a href="javascript:search_data('month',7)">7月</a></li>
                        <li><a href="javascript:search_data('month',8)">8月</a></li>
                        <li><a href="javascript:search_data('month',9)">9月</a></li>
                        <li><a href="javascript:search_data('month',10)">10月</a></li>
                        <li><a href="javascript:search_data('month',11)">11月</a></li>
                        <li><a href="javascript:search_data('month',12)">12月</a></li>
                    </ul>
                    
                    <ul class="right_ul season" style="display:none;">
                    	<li><a href="javascript:search_data('season',1)">第一季度</a></li>
                        <li><a href="javascript:search_data('season',2)">第二季度</a></li>
                        <li><a href="javascript:search_data('season',3)">第三季度</a></li>
                        <li><a href="javascript:search_data('season',4)">第四季度</a></li>
                        
                    </ul>
                    
                    <ul class="right_ul half_year" style="display:none;">
                    	<li><a href="javascript:search_data('year',1)">上半年</a></li>
                        <li><a href="javascript:search_data('year',2)">下半年</a></li>
                    </ul>
                    
                  
                
                </div>
            
            	<div id="botton_div">
                	<div style="padding-left:10px; margin-bottom:5px;">定义</div>
                    <input type="text" id="start_time" name="start_time" value="<?php echo !empty($_GET['start_time'])?$_GET['start_time']:'';?>" /> <input value="<?php echo !empty($_GET['end_time'])?$_GET['end_time']:'';?>" type="text" id="end_time" name="end_time" />
                </div>
                <div id="btn_div">
                	<button id="btn_cancel" type="button" onclick="$('#date_div').css('display','none')" style="padding:5px; background-color:#FFF; border:1px solid #CCC; width:60px;">取消</button> <button  id="btn_submit" type="submit" style=" color:#FFF;padding:5px; background-color:#66b2fe; border:1px solid #CCC; width:60px;">确定</button>
                </div>
            </div>
            
            
            
            <div id="main" style="height: 500px;"></div>
            
            </div></form>
		</div>
		<div class="row">
			 <div class="col-xs-12">
				<!-- PAGE CONTENT BEGINS -->
					
			</div>
		</div><!-- /.row -->
	</div><!-- /.page-content -->
</div><!-- /.main-content -->
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        option = {
			tooltip : {
				trigger: 'axis',
				axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			xAxis: {
				type: 'category',
				data: [<?php echo $xAxis;?>]
			},
			yAxis: {
				type: 'value'
			},
			series: [{
				data: [<?php echo $yAxis;?>],
				type: 'line',
				smooth: true
			}]
		};


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
		
		
		
		
		$('#start_time').datetimepicker({
            format: 'yyyy-mm-dd',
			autoclose: true,
			minView: 0,
			language:'zh-CN',
			minView: "month",
        });
		
		$('#end_time').datetimepicker({
            format: 'yyyy-mm-dd',
			autoclose: true,
			minView: 0,
			language:'zh-CN',
			minView: "month",
        });
		
		function show_div(char){
			$('.right_ul').css('display','none');
			$('.'+char).css('display','block');
		}
		
		
		function form_submit(){
			
			$('#form_id').attr('action',window.location.href);$('#form_id').submit();
		}
		
		function search_data(type,type_value){
			var type_year_value=$('#year').val();
			var url='';
			
			if(type=='month'){
				url='<?php echo site_url()?>crm/tongji/money_gas/month/'+type_year_value+'/'+type_value;		
			}else if(type=='season'){
				url='<?php echo site_url()?>crm/tongji/money_gas/season/'+type_year_value+'/'+type_value;	
			}else if(type=='year'){
				url='<?php echo site_url()?>crm/tongji/money_gas/year/'+type_year_value+'/'+type_value;	
			}else{
				url='<?php echo site_url()?>crm/tongji/money_gas/'+type;	
			}
			
			$('#form_id').attr('action',url);
			$('#form_id').submit();
		}
		
		
		
    </script>